<template>
  <div class="enha_bg" :style="{backgroundImage:item.bg}">
    <div class="enha" :class="detail.id" v-for="detail  in item.details">
      <div class="enha_icon enhan_iocn_bg"
           :style="{backgroundImage:item.bg}"
           @click="selectDetail(detail)">
      </div>
      <div class="enha_title"><span v-text="detail.cost"></span>-<span v-text="detail.ranks"></span></div>
      <div class="enha_des">
        <!--鼠标指向时,弹出浮动提示-->
        <div class="enha_info" v-for="(des,index) in detail.descriptions">
          <div :class="['title',
          {'destiny_title':detail.tips.search(/天命披风/i)!==-1},
          {'strike_title':detail.tips.search(/传奇打击/i)!==-1},
          {'moment_title':detail.tips.search(/传奇时刻/i)!==-1}
          ]">名称:{{ detail.title }} <span v-if="detail.descriptions.length>1">{{ index + 1 }}</span></div>
          <el-row class="des" type="flex" justify="space-between">
            <el-col :span="12">类型:{{ detail.type }}</el-col>
            <el-col :span="10">AP:{{ detail.cost }}</el-col>
          </el-row>
          <el-row class="des" type="flex" justify="space-between">
            <el-col :span="12" v-show="des.cd" v-if="des.cd>0">CD:{{ des.cd }}秒</el-col>
            <el-col :span="10" v-show="des.cost_sp" v-if="des.cost_sp>0"> 消耗:{{ des.cost_sp }}</el-col>
          </el-row>
          <div class="txt" v-html="des.txt"></div>
          <div class="tips" v-html="detail.tips"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {ElButton, ElOption, ElSelect, ElTabPane, ElTabs, ElRow, ElCol} from "element-plus";

export default {
  components: {ElButton, ElTabPane, ElTabs, ElSelect, ElOption, ElRow, ElCol},
  props: {
    item: {title: '', bg: '', icon: '', details: [{id: '', tier: 1, title: '', type: '', cost: 1, need: 0, now: 0, ranks: 1, descriptions: [{cost_sp: 20, cd: 60, txt: ''}], tips: ''}]}
  },
  data() {
    return {}
  },
  methods: {
    selectDetail(detail) {
      this.$emit('selectDetail', detail)
    }
  }
}
</script>